<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <form action="http://www.biwuit.cn/spboot/userLoginPostRequest" id="form1">
            用户名：<input type="text" name="username"><br>
            密码：<input type="password" name="password"><br>
            <input type="submit" value="提交">
        </form>

    <script>
        /* 
            需求：服务端接受的参数格式需要json的数据格式
                 我们掌握的参数格式：username=admin&password=123
                 提交参数个格式必须为：{"username":"admin","password":"123"}
                 需要把上面的数据格式转换为json格式
                 如何实现？
         */

          const request = new XMLHttpRequest();
        const form1Obj = document.querySelector("#form1")

        form1Obj.addEventListener("submit", function (e) {
            //阻止表单的提交
            e.preventDefault();

            //参数表单对象作为参数,自动完成参数的收集
            const formDataObj = new FormData(form1Obj)
            //需要json的数据格式
            const submitObj = {};
            formDataObj.forEach(function(value,key){
                //第一次遍历 username:admin
                //第二次遍历 passname:123
                // console.log(value)  
                // console.log(key)
                submitObj[key] = value;

            })

            //把submitArgs对象转换为json格式字符串
            const submitArgs = JSON.stringify(submitObj)
            console.log(submitArgs)
            request.open("POST", "http://www.biwuit.cn/spboot/getJsonParams")

            request.send(submitArgs)

            request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200) {
                    console.log(request.responseText)
                }
            }

        })
    </script>
</body>
</html>